import { Calendar } from "@arco-design/web-react";
import "./index.scss";
import { dayjs } from "@/plugins/dayjs.plugin";

const hasTodoDates = ["2024-08-01", "2024-08-07", "2024-07-30"];
export default function CustomCalendar() {
  const currentStr = dayjs().format("YYYY-MM-DD");
  const getClassNames = (day: dayjs.Dayjs) => {
    const dateStr = dayjs(day).format("YYYY-MM-DD");
    if (hasTodoDates.includes(dateStr)) {
      return "with-flag";
    }
    return "";
  };
  return (
    <Calendar
      dateRender={(currentDate: dayjs.Dayjs) => (
        <div className={`arco-calendar-date ${getClassNames(currentDate)}`}>
          <div className="arco-calendar-date-value">{currentDate.date()}</div>
        </div>
      )}
      panel
      defaultValue={currentStr}
    />
  );
}
